import { Component } from 'react'
import { connect } from 'react-redux'

import './style.less'

interface PropsInterface {
  // 在最开始时，没有确认当前组件依赖的props和state之前，可以写一个这种索引签名（万用属性）
  [attrName: string]: any
}

interface StateInterface {
  [attrName: string]: any
}

/**
 * 使用类组件，需要先声明该组件接收的props和state
 */
class Home extends Component<PropsInterface, StateInterface> {
  constructor(props: any) {
    super(props)
    this.state = {
      subMenu: [],
      menuTop: 0,
    }
    console.log('这是挂载期的生命周期，didmount，它必须执行且只执行一次')
  }

  componentDidMount() {
    console.log('这是挂载期的生命周期，didmount，它必须执行且只执行一次')
  }

  shouldComponentUpdate(nextProps: any, nextState: any) {
    console.log('这是更新期的生命周期，should，它会被多次执行,也可能不执行')
    return true
  }
  componentDidUpdate() {
    console.log('这是更新期的生命周期，update，它会被多次执行,也可能不执行')
  }

  // hooks 一个useEffect      管理单个状态多个生命周期
  // component 一个生命周期函数管理多个状态的单一生命周期
  render() {
    return <div className="doc-wrap">首页啊首页</div>
  }
}

interface StoreInterface {}

function stateToProps(state: StoreInterface) {
  return {}
}

export default connect(stateToProps, {})(Home)
